<template>
	<view class="container">
		<view class="header">
			<view class="search">
				<input
					type="search"
					name=""
					placeholder="请输入公司名称"
					id=""
					v-model="form.company_name"
					@blur="search"
				>
				<image
					src="@/static/images/icon/search.png"
					mode=""
				></image>
			</view>
			<view class="status flexCenter">
				<view
					class="item "
					:class="{active:current==0}"
					@tap="current=0"
				>
					全部
					<view class="line">

					</view>
				</view>
				<view
					class="item"
					:class="{active:current==1}"
					@tap="current=1"
				>
					<view class="title">
						进行中
						<view class="badge">
							{{jinxingzhong}}
						</view>
					</view>
					<view class="line">

					</view>
				</view>
				<view
					class="item"
					:class="{active:current==2}"
					@tap="current=2"
				>
					已完成
					<view class="line">

					</view>
				</view>
				<view
					class="item"
					:class="{active:current==3}"
					@tap="current=3"
				>
					已取消
					<view class="line">

					</view>
				</view>
			</view>
		</view>
		<view class="time">
			<uni-datetime-picker
				v-model="range"
				@change="dateChange"
				type="daterange"
			/>
		</view>
		<view class="margin32 marginTop32">
			<Order
				v-for="item,index in list"
				:key="index"
				:list="item"
			></Order>
		</view>

	</view>
</template>

<script>
import Order from "@/pages/components/order/order.vue"
import mixins from "@/mixins/mixins.js"
import {
	Home
} from '@/config/API.js'
export default {
	components: {
		Order
	},
	mixins: [mixins],
	data () {
		return {
			current: 0,
			range: ['2023-06-07', '2023-7-07'],
			list: [],
			jinxingzhong: 0,
			form: {
				limit: 5,
				page: 1,
				company_name: ''
			},
		};
	},
	onLoad () {

	},
	created () {
		let temp = this.formatTime()
		this.range = temp;
	},
	watch: {
		current: {
			handler (newValue, oldValue) {
				this.clear()
				this.init()
			}
		}
	},
	methods: {
		clear () {
			this.form.page = 1;
			this.list = [];
		},
		init () {
			Home.indexFenxiao({
				...this.form,
				type: this.current,
				begin: this.range[0],
				end: this.range[1]
			}).then(res => {
				uni.stopPullDownRefresh()
				this.form.page++;
				this.list.push(...res.data.items);
				this.jinxingzhong = res.data.jinxingzhong;
				if (res.data.order.length < 1) {
					uni.showToast({
						icon: "none",
						title: "没有更多数据了"
					})
					this.form.page--
				}
			})
		},
		search () {
			this.clear()
			this.init()
		},
		dateChange (res) {
			console.log(res, res.length != 2);
			this.range = res;
			this.clear()
			this.init()
			if (res.length != 2) {
				uni.showToast({
					icon: "error",
					title: "日期需选择范围"
				})
			}
		}
	}
}
</script>
<style>
page {
	background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>
.time {
	position: fixed;
	top: 235rpx;
	left: 0;
	z-index: 999;
	width: 100%;
}

.container {
	padding-top: 290rpx;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

.search {
	padding: 37rpx 32rpx 33rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	position: relative;

	input {
		width: 686rpx;
		height: 76rpx;
		background: #f4f6f8;
		border-radius: 80rpx 80rpx 80rpx 80rpx;
		opacity: 1;
		padding-left: 88rpx;

		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	image {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		left: 61rpx;
		top: 60rpx;
	}
}

.status {
	padding: 19rpx 0 13rpx;
	background-color: #fff;

	.item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #5b5a68;

		.title {
			margin: 0 auto;
			position: relative;
			width: fit-content;
		}

		.badge {
			position: absolute;
			right: 0;
			top: 0;

			background: #f80b23;
			width: 25rpx;
			height: 25rpx;
			font-size: 18rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
			border-radius: 50%;
			transform: translate(100%, -30%);
		}

		.line {
			width: 40rpx;
			height: 8rpx;
			background: transparent;
			border-radius: 70rpx 70rpx 70rpx 70rpx;
			opacity: 1;
			margin: 9rpx auto 0;
		}
	}

	.active {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #060a31;

		.line {
			background: #fe2c1d;
		}
	}
}
</style>